<template>
    <div class="duty-person">
        <div class="opers flex v-c" v-if="hasPermission('029023001')">
            <el-button type="blue" @click="newAction" :disabled="!$store.getters.hasEditPermission"
                ><i class="iconfont icon-add"></i> 添加值班人员</el-button
            >
        </div>
        <el-table :data="dataList" style="width: 100%" v-loading="loading">
            <el-table-column prop="accountname" label="登录账号"></el-table-column>
            <el-table-column prop="name" label="人员姓名"></el-table-column>
            <el-table-column prop="post" label="职务"></el-table-column>
            <el-table-column prop="tel" label="办公电话"></el-table-column>
            <el-table-column prop="phone" label="手机号码"></el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <el-button
                            type="green"
                            :loading="adding"
                            @click="editAction(scope.row)"
                            v-if="hasPermission('029023002')"
                            :disabled="!$store.getters.hasEditPermission"
                            >编辑</el-button
                        >
                        <el-button
                            type="red"
                            :loading="deleting"
                            @click="deleteAction(scope.row)"
                            v-if="hasPermission('029023003')"
                            :disabled="!$store.getters.hasEditPermission"
                            >删除</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="total > 0"
            class="text-right mt-20 mr-20"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, total, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 添加/编辑 start -->
        <el-dialog
            v-if="newModalVisible"
            :title="newModalTitle"
            :visible.sync="newModalVisible"
            width="660px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
            <New
                ref="newData"
                :activeData="activeData"
                @success="submitSuccessAction"
                @fail="adding = false"
                @submitting="adding = true"
                @cancel="newModalVisible = false"
            >
            </New>
            <div slot="footer">
                <el-button type="cancel" @click="newModalVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="adding"
                    @click="submitAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <!-- 添加/编辑 end -->
    </div>
</template>
<script>
import { mapState } from "vuex"
import New from "@/components/archive/DutyPersonNew.vue"
export default {
    name: "Notice",
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    components: {
        New,
    },
    data() {
        return {
            total: 0,
            currentPage: 1,
            pageSize: 10,
            loading: false,
            dataList: [],
            activeData: null,
            newModalTitle: "",
            newModalVisible: false,
            adding: false,
            deleting: false,
        }
    },
    computed: {
        mainH() {
            return this.winH - 200
        },
    },
    methods: {
        getData(page) {
            this.loading = true
            this.$get("/check/dutyPerson/dutyPersonListPage", {
                page: page,
                limit: this.pageSize,
            }).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        getDataById(id, cbk) {
            this.$get("/check/dutyPerson/dutyPersonDetail", {
                id: id,
            }).then(
                (res) => {
                    let thisData = res.data
                    cbk && cbk(thisData)
                },
                (err) => {
                    //
                }
            )
        },
        newAction() {
            this.newModalTitle = "新增值班人员"
            this.newModalVisible = true
            this.activeData = null
        },
        editAction(item) {
            this.getDataById(item.id, (data) => {
                this.activeData = data
                this.newModalTitle = "编辑值班人员"
                this.newModalVisible = true
            })
        },
        submitAction() {
            this.$refs.newData.submitAction()
        },
        // 新增/编辑成功
        submitSuccessAction(data) {
            this.adding = false
            this.newModalVisible = false
            this.getData(this.currentPage)
        },
        deleteAction(item, index) {
            this.showConfirm("确定删除该数据吗？", () => {
                this.deleting = true
                this.$post("/check/dutyPerson/dutyPersonDelete", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
    created() {
        this.getData(1)
    },
}
</script>
